html {
  font-size: $font-size;
}

body {
  background-color: $body-bg;
}

a {
  transition: 0.3s all;
}

dl,
ol,
ul {
  padding: 0;
  margin: 0;
}

label {
  margin-bottom: 0;
}

.animated {
  animation-duration: 0.3s;
}

.text-muted {
  color: $gray-600 !important;
}
.text-accent {
  color: $accent !important;
}

.flex {
  flex: 1;
}

.btn-list button.btn {
  &:not(:last-child) {
    margin-right: .5rem;
  }
}

.card {
  box-shadow: $box-shadow-base;

  .card-body {
    padding: 1rem;
  }
}

$progress-bar-height: 8px;
.progress-bar {
  background-color: #eee;
  height: $progress-bar-height;
  border-radius: $progress-bar-height / 2;
  overflow: hidden;

  .progress-bar-full {
    background-color: $primary;
    background-color: var(--primary);
    height: $progress-bar-height;
    border-radius: $progress-bar-height / 2;
  }
}

.dl-wrap {
  display: flex;
  margin-bottom: 1rem;

  .dl-dt {
    color: #999;
    width: 100px;
  }

  .dl-dd {
    flex: 1;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.table-bordered thead td,
.table-bordered thead th {
  border-bottom-width: 1px;
}

.table.table-vertical-middle td,
.table.table-vertical-middle th {
  vertical-align: middle !important;
}

.panel-danger {
  color: #e51c23 !important;
  background-color: #fad2d3 !important;
}

.panel-warning {
  color: #e09609 !important;
  background-color: #fff3cd !important;
}

.btn-long {
  min-width: 100px;
}

.font-large {
  font-size: 1.1rem;
}

.card.table-card {
  border: none;
  .card-header {
    border: 1px solid $border-color;
  }
  .card-body {
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
  }
  .table,
  .el-table {
    margin-top: -1px;
  }
}
